<template>
	<view class="root-box root-container root-page-top">
		<uv-navbar placeholder bgColor="transparent" :fixed="false" @leftClick="goBack">
			<template v-slot:left>
				<view class="uv-nav-slot">
					<uv-icon name="arrow-left" size="19"></uv-icon>
					<view class="nav-title">
						<uv-icon name="map" size="19"></uv-icon>
						<view class="city-name">{{cityName}}</view>
					</view>
				</view>
			</template>
		</uv-navbar>

		<view class="content">
			<!-- <view class="plan-box flx-default-c">
				<image src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0906/970b7202509061646316771.png"   />
			</view> -->
			<view class="list-title">
				待办事项
			</view>

			<view class="list-load mt-30">
				<ZyhList :request="fetchList" :page-size="10" ref="listRef">

					<template v-slot="{ item, index }">

						<view class="loop-item">
							<view class="loop-item-header">
								<view class="font-small"><text>订单号:</text><text
										class="order-on">{{item.order_no}}</text>
								</view>
								<view class="lable-box">{{item.service_time}}</view>
							</view>
							<view class="loop-body">
								<view class="loop-body-left">
									<image :src="item.product_image"></image>
								</view>
								<view class="loop-body-right">
									<view class="loop-body-item">
										<view class="lltem-title">{{item.product_name}}</view>
										<view class="lltem-money">￥{{item.total_price}}</view>
									</view>
									<view class="loop-body-item">
										<view class="font-small"><text>{{item.spec_values}}</text></view>
										<view class="font-small"><text>x{{item.num}}</text></view>
									</view>
								</view>
							</view>
							<view class="loop-footer">
								<view class="footer-icon"><uv-icon name="map" color="red" size="18"></uv-icon></view>
								<view class="footer-text-box">
									{{item.address_address}}
								</view>
							</view>
							<view class="loop-footer">
								<view class="footer-icon"><uv-icon name="clock" color="red" size="16"></uv-icon></view>
								<view class="font-small pl-20">
									{{item.update_time}}
								</view>
							</view>
							<view class="loop-footer">
								<view class="footer-icon"><uv-icon name="chat" color="red" size="18"></uv-icon></view>
								<view class="font-small pl-20">
									{{item.remark}}
								</view>
								<view class="lable-box ml-20">注意</view>
							</view>

							<view class="mt-20"><uv-divider></uv-divider></view>
							<view class="bt-box">
								<view class="bt-item-box">
									<view class="bt-item-1"  @click.stop="onAction(item.id,2)">取消</view>
									<view class="bt-item-2" @click.stop="onAction(item.id,1)">接受</view>
								</view>
							</view>

						</view>

					</template>
					<template #empty>
						<noData :paddingTop="200"></noData>
					</template>

				</ZyhList>
			</view>



			<skilledNavbar :tabValue="tabValue"></skilledNavbar>
        </view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import skilledNavbar from './components/skilled_navbar.vue'
	import ZyhList from '@/components/ZyhList.vue'
	import noData from '@/components/noData.vue'
	import {
		useUserStore
	} from '@/store'
	import {
		storeToRefs
	} from 'pinia'

	import {
		getCityWebAreaInfo
	} from '@/api'

	import {
		technicianWaitOrderList,
		technicianAcceptOrReject
	} from '@/api/other.js'
    import { useCustomBack } from '@/components/useCustomBack.js'

	import {
		navigate
	} from '@/util/tools.js';
	
	const { goBack } = useCustomBack('/pages-user/select_Identity')
	 
	const cityName = ref('获取中...')
	const getCityLocal = async () => {
		const result = await getCityWebAreaInfo();
		if (result.code == 200) {
			let res = result.result.content;
			cityName.value = res.address_detail.district.includes('市') ? res.address_detail.district : res
				.address_detail.city
		}
	}

	const listRef = ref(null)
	const user = useUserStore()
	const {
		token,
		userInfo
	} = storeToRefs(user)
	const tabValue = ref(0)
	const init = async () => {
		getCityLocal()

	}

	const fetchList = async ({
		page,
		pageSize
	}) => {
		const res = await technicianWaitOrderList({
			page,
			limit: pageSize
		})
		if (res.code == 200) {
			return {
				list: res.result.data || [],
				total: res.result.total || 0
			}
		} else {
			return {
				list: [],
				total: 0
			}
		}

	}
	
	const onAction= async (order_id,takes_order_status)=>{
		const res = await technicianAcceptOrReject({order_id,takes_order_status})
		console.log('--technicianAcceptOrReject--',res)
		if(res.code==200){
			listRef.value.reload()
			navigate('pages-skilled/order')
			
			
			// let url='';
			// if(takes_order_status===1){
			// 	url='/pages-public/operation_result?status=success&title=接受订单&desc=您已接单，请尽快为用户提供优质的服务'
			// 	navigate(url)
			// }else{
			// 	url='/pages-public/operation_result?status=warning&title=拒绝订单&desc=您已拒绝服务'
			// 	navigate(url)
			// }
		}else{
			uni.$uv.toast('操作发生错误')
		}
	}





	init()
</script>

<style lang="scss" scoped>
	.root-box {
		

		.content {
			padding: 30rpx;
			box-sizing: border-box;

		}
	}

	.uv-nav-slot {
		display: flex;
		align-items: center;

	}

	.nav-title {
		margin-left: 30upx;
		display: flex;
		align-items: center;
	}

	.city-name {
		margin-left: 10upx;
	}

	.plan-box {
		box-sizing: border-box;
		border-radius: 20upx;
		background-color: red;
		box-shadow: 5upx 5upx 5upx #cccccc;
		width: 100%;
		height: 150upx;

	}

	.plan-box image {
		width: 40upx;
		height: 40upx
	}

	.list-title {
		font-size: 32upx;
		font-weight: 600;
		margin-top: 20upx;
		color: #333;
	}

	.loop-item {
		margin-top: 20upx;
		box-sizing: border-box;
		padding: 20upx;
		border-radius: 15upx;
		background-color: #fff;
		width: 100%;
	}

	.loop-item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		align-content: center;
	}

	.font-small {
		font-size: 20upx;
		color: #666;
	}

	.lable-box {
		border-radius: 8upx;
		background-color: #ffd6da;
		padding: 0 10upx;
		color: red;
		font-size: 15upx;
		line-height: 32upx;
	}

	.order-on {
		margin-left: 10upx;
	}

	.loop-body {
		margin-top: 15upx;
		display: flex;
	}

	.loop-body-left {
		width: 120upx;
		height: 120upx;
		background-color: #cccccc;
	}
	
	.loop-body-left image{
		width: 100%;
		height: 100%;
	}

	.loop-body-right {
		flex: 1;
		margin-left: 20upx;
	}

	.loop-body-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		align-content: center;
		margin-top: 10upx;
	}

	.lltem-title {
		color: #333;
		font-size: 28upx;
		font-weight: 600;
	}

	.lltem-money {
		color: red;
		font-size: 28upx;
	}

	.loop-footer {
		margin-top: 10upx;
		display: flex;
		align-items: center;

	}

	.footer-text-box {
		padding-left: 20upx;
		font-size: 24upx;
		color: #333;
		font-weight: 500;
	}

	.bt-box {
		display: flex;
		padding: 20upx;
		box-sizing: border-box;
		justify-content: center;
		align-items: center;
	}

	.bt-item-box {
		display: flex;
		align-items: center;
	}

	.bt-item-1 {
		width: 300upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		background-color: #efefef;
		color: #333;
		border-radius: 10upx 0 0 10upx;
		font-size: 24upx;

	}

	.bt-item-2 {
		width: 300upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		background-color: red;
		color: #fff;
		border-radius: 0 10upx 10upx 0;
		font-size: 24upx;
	}
</style>